<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas width="600px" height="400px" id="canvas"></canvas>
<script>
  const canvas = document.querySelector("#canvas")
  const ctx = canvas.getContext("2d")

  // 通过描边的方式绘制矩阵 - 空心
  ctx.strokeStyle = 'blue'
  ctx.strokeRect(10, 10, 300, 150)

  // 实心矩阵
  ctx.fillStyle = 'yellow'
  ctx.fillRect(10,170,300,150)

</script>
</body>
</html>